<template>
    <div id="PurchaseRoute">
      <ul>
        <li>
          {{$t('PurchaseRoute.BigWord')}}
        </li>
        <li>
         —
        </li>
        <li>
          {{$t('PurchaseRoute.small')}}
        </li>
      </ul>
      <ul>
        <PurchaseRoute_Button v-for="(list,index) in LinkList" :key="index" :mess="list" :imgHeight="imgHeight"/>
      </ul>
    </div>
</template>

<script>
  import PurchaseRoute_Button from "@/components/mobile/commonComponents/PurchaseRoute_Button"
    export default {
        name: "PurchaseRoute",
      props:{
          LinkList:{},
      },
      data(){
          return{
            imgHeight:0,
         }
      },
      methods:{
        getScreen:function(){
          this.imgHeight=(document.body.clientWidth-120)/5;
        },
      },
      components:{
        PurchaseRoute_Button:PurchaseRoute_Button,
      },
      mounted(){
        this.getScreen();
      }
    }
</script>

<style scoped>
#PurchaseRoute{
  color:#000;
}
  #PurchaseRoute ul{
    list-style: none;
  }
  #PurchaseRoute ul:last-child{
    padding-bottom: 10px;
  }
  #PurchaseRoute ul li{
  }
  #PurchaseRoute ul li:first-child{
    padding-top:15px;
    font-size:30px;
  }
  #PurchaseRoute ul li:last-child{
    font-size:8px;
    padding-bottom: 10px;
  }

</style>
